<template>
    <div>
        <el-row :gutter="10" style="margin-bottom: 20px;">
            <el-col :span="6">
                <el-card>
                    <div style="color:#409EFF"><i class="el-icon-user"></i>用户总数</div>
                    <div style="padding:10px 0;text-align: center;font-weight:bold;">{{myUserCount}}</div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div style="color:#cc1234"><i class="el-icon-user"></i>文件总数</div>
                    <div style="padding:10px 0;text-align: center;font-weight:bold;">{{myFileCount}}</div>
                </el-card>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <div id="main" style="width:500px;height: 450px;"></div>
            </el-col>
            <el-col :span="12">
                <div id="pie" style="width:500px;height: 450px;"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        name: "Home",
        data() {
            return {
                myUserCount: '',
                myFileCount:''
            }
        },
        mounted() { // 页面元素渲染之后再触发

            this.getUserCount()
            this.getFileCount()

            let chartDom = document.getElementById('main');
            let myChart = echarts.init(chartDom);
            let option;

            option = {
                title: {
                    text: '各学期成绩统计',
                    subtext: '趋势图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                xAxis: {
                    type: 'category',
                    data: ['第一学年', '第二学年', '第三学年', '第四学年']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '123',
                        data: [],
                        type: 'line'
                    },
                    {
                        name: '456',
                        data: [],
                        type: 'bar'
                    }
                ]
            };

            this.request.get("/echarts/members").then(res => {
                option.xAxis.data = res.data.x
                option.series[0].data = res.data
                option.series[1].data = res.data
                myChart.setOption(option)

            })

        },
        methods: {
            getUserCount() {
                this.request.get("/user/getUserCount").then(res => {
                    this.myUserCount = res.data
                })
            },
            getFileCount(){
                this.request.get("/user/getFileCount").then(res => {
                    this.myFileCount = res.data
                })
            }

        }
    }
</script>

<style scoped>

</style>
